<template>
  <ag-grid-vue
    :style="{ width: '100%', height: '100%', 'text-align': 'left' }"
    class="ag-theme-alpine ag-theme-custom"
    :columnDefs="columns"
    :defaultColDef="defaultColDef"
    :rowData="list"
    :debounceVerticalScrollbar="true"
    :rowDragManaged="true"
    :animateRows="true"
    :headerHeight="40"
    :grid-options="gridOptions"
    @row-drag-end="onRowDragEnd"
    @grid-ready="onGridReady"
    @grid-size-change="onTotalGridReadd"
    :getRowHeight="getRowHeight"
    domLayout="autoHeight"
    :row-height="50"
  >
  </ag-grid-vue>
</template>
<script lang="ts" setup>
// ag-grid主题定制 https://www.ag-grid.com/vue-data-grid/themes/
import 'ag-grid-community/styles//ag-grid.css'
import 'ag-grid-community/styles//ag-theme-alpine.css'
import operation from './Operation.vue'
import { ref, watch } from 'vue'
import { AgGridVue } from 'ag-grid-vue3'
import { ColDef, GridApi } from 'ag-grid-community'

const props = defineProps({
  columns: {
    type: Array<ColDef>,
    required: true,
  },
  list: {
    type: Array<any>,
    required: true,
  },
  updateFunc: {
    type: Function,
    default: null,
  },
  tableId: {
    type: String,
    default: 'id', // 根据字段进行weight拖动
  },
  expand: {
    type: Boolean,
  },
  expandCal: {
    type: Function,
  },
})

let copyList: Array<any> = JSON.parse(JSON.stringify(props.list))
watch(props, () => {
  copyList = JSON.parse(JSON.stringify(props.list))
})

const defaultColDef: ColDef = {
  sortable: true,
  resizable: true,
  editable: true,
  autoHeaderHeight: true,
}

// 组件
const gridOptions = ref({
  components: {
    operation, // 操作按钮
  },
})

let gridApi: GridApi
const onTotalGridReadd = () => {
  gridApi.sizeColumnsToFit()
}

const onGridReady = (params: any) => {
  gridApi = params.api
  // const gridColumnApi = params.columnApi;
  // gridColumnApi.alwaysShowVerticalScroll(true)
  // gridApi.resetRowHeights()
  // onTotalGridReadd()
}

const getRowHeight = (params: any) => {
  // if (params.node.rowHeight > rowHeight) {
  //   gridApi.forEachNode(function (rowNode) {
  //     console.log(rowNode.rowHeight = 60)
  //     // rowNode.setRowHeight(70)
  //   })
  //   gridApi.onRowHeightChanged()
  //   // console.log("hello world")
  //   // gridApi.resetRowHeights()
  // }
}

const onRowDragEnd = (e: any) => {
  if (!props.updateFunc) return
  const indx = e.node.childIndex
  if (!e.node.data || e.node.data[props.tableId] === (copyList[indx] as any)[props.tableId]) {
    // 无数据或没有有效滑动
    return
  }
  let params: any = e.node.data
  if (e.node.parent.childrenAfterAggFilter[indx - 1]) {
    // 存在左兄弟
    params.weigh = (e.node.parent.childrenAfterAggFilter[indx - 1].data as any).weigh - 1
    if (params.weigh < 1) {
      params.weigh = 1
    }
  } else if (e.node.parent.childrenAfterAggFilter[indx + 1]) {
    // 存在右兄弟
    params.weigh = (e.node.parent.childrenAfterAggFilter[indx + 1].data as any).weigh + 1
  }
  copyList = []
  e.node.parent.childrenAfterAggFilter.forEach((item: any) => {
    copyList.push(item.data)
  })
  // 数据修改
  props.updateFunc.call(null, params)
}
</script>
<style lang="scss" scoped>
.ag-theme-custom {
  --ag-borders: none;
  --ag-border-color: #dfe6ec;
  --ag-header-background-color: #f2f6fc;
}
</style>
